前端自动化开发环境

前端自动化开发环境

配置前端自动化开发环境，主要功能有：

• 浏览器自动刷新

1 安装nodejs

去nodejs官网下载最新稳定版本，即LTS版本，Windows环境下下载安装版，否则需要自己手动添加路径到环境变量中。
安装成功打开cmd输入：

$ node -v
$ npm -v

出现版本号即安装成功。

2 nodejs包管理器

默认安装npm作为包管理器，但国内访问极度不友好，使用cnpm代替，解决不能下载问题。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

推荐使用yarn，Facebook出品包管理器。

3 包管理器换源

1. npm，打开cmd输入:

$ npm config set registry https://registry.npm.taobao.org
$ npm config get registry

1. yarn，打开cmd输入:

$ yarn config set registry https://registry.npm.taobao.org
$ yarn config get registry

4 初始化项目

在项目文件夹打开cmd：

$ myweb && cd myweb && npm init

接下来一路回车，项目根目录下会生成package.json文件，以下是一个推荐的项目结构

myweb/
├── src/
│   ├── css
│   ├── js
│   ├── html
│   ├── images
│   └── fonts
├── dist/
│   ├── css
│   ├── js
│   ├── images
│   ├── fonts
│   └── index.html
├── package.json
└── gulpfile.js

5 安装gulp和browser-sync

首先是gulp，官网定义：自动化构建工具，它可以极大地缩短开发时间，安装和检查：

<!-- 全局安装 -->
$ cnpm install --global gulp
<!-- 项目依赖安装 -->
$ cnpm install --save-dev gulp
<!-- 检查 -->
$ gulp -v

接下来安装browsersync：

$ cnpm install -g browser-sync

项目根目录下创建gulpfile.js，写入以下内容

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

gulp.task('serve', function() {
    browserSync.init({
        server: {
            baseDir: './dist'
        }
    });

    gulp.watch('./src/html/**/*.html').on('change', reload);
    gulp.watch('./src/html/**/*.css').on('change', reload);
    gulp.watch('./src/html/**/*.js').on('change', reload);
});

之后去命令行输入：

$ gulp serve

这时gulp就监听了css、js、html文件，在编辑器中保存浏览器就会自动刷新页面了。

不定期更新，欢迎收藏，Enjoy it! 😉